/* You can add global styles to this file, and also import other style files */
html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background:#12152d;
}
body{
  overflow-x: hidden;
}



.loader-tiny {
  border: 2px solid #f3f3f3; /* Light grey */
  border-top: 2px solid #E51253; /* Pink */
  border-radius: 50%;
  width: 14px;
  height: 14px;
  animation: spin 2s linear infinite;
  display: inline-block;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.no-wrap{
  white-space: nowrap;
}
.btn{
  -webkit-app-region: no-drag;
}
.text-light-theme{
  color:#0d3349!important;;
  transition: color 350ms ease-out;
}
.text-dark-theme{
  color: #ffffff!important;
  transition: color 350ms ease-out;
}
.pink-button{
  background-color: #ed4e7a!important;
}
.button-dark-theme{
  color: #000000 !important;
  background-color: #fff !important;
}
.full-height{
  height: 100%;
}
.gu-mirror {
  position: fixed !important;
  margin: 0 !important;
  z-index: 9999 !important;
  opacity: 0.8;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=80)';
  filter: alpha(opacity=80);
}
.gu-hide {
  display: none !important;
}
.gu-unselectable {
  -webkit-user-select: none !important;
  -moz-user-select: none !important;
  -ms-user-select: none !important;
  user-select: none !important;
}
.gu-transit {
  opacity: 0.2;
  -ms-filter: 'progid:DXImageTransform.Microsoft.Alpha(Opacity=20)';
  filter: alpha(opacity=20);
}

.loader-tiny {
  border: 3px solid #f3f3f3; /* Light grey */
  border-top: 3px solid #ed4e7a; /* Pink */
  border-radius: 50%;
  width: 23px;
  height: 23px;
  animation: spin 2s linear infinite;
  display: inline-block;
  margin-right: 11px;
}
.loader-small {
  border: 3px solid #f3f3f3; /* Light grey */
  border-top: 3px solid #ed4e7a; /* Pink */
  border-radius: 50%;
  width: 40px;
  height: 40px;
  animation: spin 2s linear infinite;
  display: inline-block;
}

.loader-initial {
  border: 16px solid #f3f3f3; /* Light grey */
  border-top: 16px solid #ed4e7a; /* Pink */
  border-radius: 50%;
  width: 120px;
  height: 120px;
  animation: spin 2s linear infinite;
  display: inline-block;
  margin-bottom: 20px;
}
.modal, .modal-content, .modal-overlay{
  -webkit-app-region: no-drag;
}

::-webkit-scrollbar {
  height: 16px;
  width: 16px;
  background: #e0e0e0;
}
::-webkit-scrollbar-corner {
  background: #cfcfcf;
}
::-webkit-scrollbar-thumb {
  background: #ed4e7a;
}
.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f5f5f5;
  border: 1px solid #e3e3e3;
  border-radius: 4px;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.05);
}
.well-lg {
  padding: 24px;
  border-radius: 6px;
}
.no-margin {
  margin: 0!important;
}
.no-padding {
  padding: 0!important;
}
.vertical-align {
  vertical-align: middle;
}
.text-center {
  text-align: center;
}
.input-dark-theme:focus {
  border-bottom: 1px solid white !important;
  box-shadow: 0 1px 0 0 white !important;
  color:white;
}
.input-field .label-dark-theme {
  color: white !important;
}
.chip-icon {
  padding-top: 4px!important;
}
.cursor{
  cursor:pointer;
}
.section-title {
  margin-top: 1em;
}
.link,
.sort-link {
  color: lightseagreen;
  cursor: pointer;
}
.link-white {
  color: lightcyan;
  cursor: pointer;
}
.link-white:hover{
  text-decoration: underline;
}
.inline{
  display: inline-block;
}
.margin-bottom {
  margin-bottom: 1em;
}
.margin-right{
  margin-right: 1em;
}
.no-outline{
  outline: none;
}
.relative{
  position:relative;
}
.small-button {
  padding: 5px!important;
  line-height: 16px!important;
  height: 24px!important;
  color: white;
}
.no-cursor{
  cursor: initial!important;
}

.chip>i {
  float: left;
  margin: 0 8px 0 0px;
  font-size: 28px;
  line-height: 32px;
  border-radius: 50%;
}
.logo-img{
  width: 200px;
  margin-top: 20px;
  margin-left: -10px;
}
code > pre, .code{
  background:#0c0c0c;
  color: white;
  border-radius: 4px;
  padding: 5px;
  display: block;
}
.modal-fixed-footer{
  overflow: hidden!important;
}
.screen-description{
  font-size: 20px;
  line-height: 23px;
  color: white;
  margin-top: 27px;
  margin-bottom: 27px;
}

.divider-margin-top{
  margin-top: 25px;
}
.pointer{
  cursor: pointer;
}

.inner-app-container{
  padding-left: 80px;
  padding-right: 80px;
  color: white;
}
.inner-app-container-margin-top{
  margin-top: 27px;
}
.margin-top{
  margin-top: 1.5em;
}
.modal{
  background: #444444!important;
  color: white;
}

.modal .modal-footer {
  background: #444444!important;
  color: white;
  padding-right: 12px!important;
}

.no-tasks{
  padding-left: 50px;

  font-style: normal;
  font-weight: 400;
  font-size: 20px;
  line-height: 23px;
  display: flex;
  align-items: center;
  margin-top: 27px;
  color: #FFFFFF;
}




/*Forms*/



.pure-material-button-contained {
  -webkit-app-region: no-drag;
  position: relative;
  display: inline-block;
  box-sizing: border-box;
  border: none;
  padding: 0 16px;
  min-width: 64px;
  height: 36px;
  vertical-align: middle;
  text-align: center;
  text-overflow: ellipsis;
  text-transform: uppercase;
  color: rgb(255, 255, 255);
  background: #E51253;
  border-radius: 10px;
  box-shadow: 0 3px 1px -1px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
  font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
  font-size: 14px;
  font-weight: 400;
  line-height: 36px;
  overflow: hidden;
  outline: none;
  cursor: pointer;
  transition: box-shadow 0.2s;
}
.pure-material-button-contained.reset{
  background: #fc864e;
}
.pure-material-button-contained::-moz-focus-inner {
  border: none;
}
.pure-material-button-contained.spaced{
  margin-bottom: 1em;
  margin-right: 30px;
}
.pure-material-button-contained.spaced:last-child {
  margin-right: 2px;
}
.pure-material-button-contained.slim{
  padding: 5px 10px;
  height: 25px;
  line-height: 17px;
}

.pure-material-button-contained.tiny{
  min-width: 20px;
}

.pure-material-button-contained.flat{
  background: transparent;
  border: 2px solid #afafaf;
  color: #afafaf;
  padding: 0 8px;
  line-height: 30px;
  height: 34px
}
.pure-material-button-contained.small{
  padding: 0 8px;
  height: 20px;
  line-height: 16px;
}

.pure-material-button-contained.flat.active{

  border: 2px solid white;
  color: white;
}

/* Overlay */
.pure-material-button-contained::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgb(255, 255, 255);
  opacity: 0;
  transition: opacity 0.2s;
}

/* Ripple */
.pure-material-button-contained::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 50%;
  padding: 50%;
  width: 32px; /* Safari */
  height: 32px; /* Safari */
  background-color: rgb(255, 255, 255);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
  transition: opacity 1s, transform 0.5s;
}

/* Hover, Focus */
.pure-material-button-contained:hover,
.pure-material-button-contained:focus {
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 4px 5px 0 rgba(0, 0, 0, 0.14), 0 1px 10px 0 rgba(0, 0, 0, 0.12);
}

.pure-material-button-contained:hover::before {
  opacity: 0.08;
}

.pure-material-button-contained:focus::before {
  opacity: 0.24;
}

.pure-material-button-contained:hover:focus::before {
  opacity: 0.3;
}

/* Active */
.pure-material-button-contained:active {
  box-shadow: 0 5px 5px -3px rgba(0, 0, 0, 0.2), 0 8px 10px 1px rgba(0, 0, 0, 0.14), 0 3px 14px 2px rgba(0, 0, 0, 0.12);
}

.pure-material-button-contained:active::after {
  opacity: 0.32;
  transform: translate(-50%, -50%) scale(0);
  transition: transform 0s;
}

/* Disabled */
.pure-material-button-contained:disabled {
  color: rgba(255, 255, 255, 0.38);
  background-color: rgba(255, 255, 255, 0.20);
  box-shadow: none;
  cursor: initial;
}

.pure-material-button-contained:disabled::before {
  opacity: 0;
}

.pure-material-button-contained:disabled::after {
  opacity: 0;
}

/* Checkboxes
   ========================================================================== */

/* Remove default checkbox */
[type="checkbox"]:not(:checked),
[type="checkbox"]:checked {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

// Checkbox Styles
   [type="checkbox"] {
// Text Label Style
   + span:not(.lever) {
     position: relative;
     padding-left: 35px;
     cursor: pointer;
     display: inline-block;
     height: 25px;
     line-height: 25px;
     font-size: 1rem;
     user-select: none;
   }

/* checkbox aspect */
+ span:not(.lever):before,
&:not(.filled-in) + span:not(.lever):after {
   content: '';
   position: absolute;
   top: 0;
   left: 0;
   width: 18px;
   height: 18px;
   z-index: 0;
   border: 2px solid #afafaf;
   border-radius: 1px;
   margin-top: 3px;
   transition: .2s;
 }

:not(.filled-in) + span:not(.lever):after {
  border: 0;
  transform: scale(0);
}

&:not(:checked):disabled + span:not(.lever):before {
   border: none;
   background-color: #bfbfbf;
 }

// Focused styles
  &.tabbed:focus + span:not(.lever):after {
     transform: scale(1);
     border: 0;
     border-radius: 50%;
     box-shadow: 0 0 0 10px rgba(0,0,0,.1);
     background-color: rgba(0,0,0,.1);
   }
}

[type="checkbox"]:checked {
+ span:not(.lever):before {
  top: -4px;
  left: -5px;
  width: 12px;
  height: 22px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #0fb7a9;
  border-bottom: 2px solid #0fb7a9;
  transform: rotate(40deg);
  backface-visibility: hidden;
  transform-origin: 100% 100%;
}

&:disabled + span:before {
   border-right: 2px solid #bfbfbf;
   border-bottom: 2px solid #bfbfbf;
 }
}

/* Indeterminate checkbox */
[type="checkbox"]:indeterminate {
+ span:not(.lever):before {
  top: -11px;
  left: -12px;
  width: 10px;
  height: 22px;
  border-top: none;
  border-left: none;
  border-right: 2px solid #0fb7a9;
  border-bottom: none;
  transform: rotate(90deg);
  backface-visibility: hidden;
  transform-origin: 100% 100%;
}

// Disabled indeterminate
  &:disabled + span:not(.lever):before {
     border-right: 2px solid #bfbfbf;
     background-color: transparent;
   }
}

// Filled in Style
   [type="checkbox"].filled-in {
// General
   + span:not(.lever):after {
     border-radius: 2px;
   }

+ span:not(.lever):before,
+ span:not(.lever):after {
  content: '';
  left: 0;
  position: absolute;
  /* .1s delay is for check animation */
  transition: border .75s, background-color .75s, width .70s .1s, height .70s .1s, top .70s .1s, left .70s .1s;
  z-index: 1;
}

// Unchecked style
  &:not(:checked) + span:not(.lever):before {
     width: 0;
     height: 0;
     border: 3px solid transparent;
     left: 6px;
     top: 10px;
     transform: rotateZ(37deg);
     transform-origin: 100% 100%;
   }

&:not(:checked) + span:not(.lever):after {
   height: 20px;
   width: 20px;
   background-color: transparent;
   border: 2px solid #cfcfcf;
   top: 0px;
   z-index: 0;
 }

// Checked style
  &:checked {
+ span:not(.lever):before {
  top: 0;
  left: 1px;
  width: 8px;
  height: 13px;
  border-top: 2px solid transparent;
  border-left: 2px solid transparent;
  border-right: 2px solid #bfbfbf;
  border-bottom: 2px solid #bfbfbf;
  transform: rotateZ(37deg);
  transform-origin: 100% 100%;
}

+ span:not(.lever):after {
  top: 0;
  width: 20px;
  height: 20px;
  border: 2px solid #0fb7a9;
  background-color: #0fb7a9;
  z-index: 0;
}
}

// Focused styles
  &.tabbed:focus + span:not(.lever):after {
     border-radius: 2px;
     border-color: #cfcfcf;
     background-color: rgba(0,0,0,.1);
   }

&.tabbed:checked:focus + span:not(.lever):after {
   border-radius: 2px;
   background-color: #0fb7a9;
   border-color: #0fb7a9;
 }

// Disabled style
  &:disabled:not(:checked) + span:not(.lever):before {
     background-color: transparent;
     border: 2px solid transparent;
   }

&:disabled:not(:checked) + span:not(.lever):after {
   border-color: transparent;
   background-color: #afafaf;
 }

&:disabled:checked + span:not(.lever):before {
   background-color: transparent;
 }

&:disabled:checked + span:not(.lever):after {
   background-color: #afafaf;
   border-color: #afafaf;
 }
}


.switch,
.switch * {
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.switch label {
  cursor: pointer;
}

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;

&:checked + .lever {
   background-color: #E51253;

&:before, &:after {
             left: 18px;
           }

&:after {
   background-color: #f3f3f3;
 }
}
}

.switch label .lever {
  content: "";
  display: inline-block;
  position: relative;
  width: 36px;
  height: 14px;
  background-color: #afafaf;
  border-radius: 10px;
  margin-right: 10px;
  transition: background 0.3s ease;
  vertical-align: middle;
  margin: 0 16px;

&:before, &:after {
             content: "";
             position: absolute;
             display: inline-block;
             width: 20px;
             height: 20px;
             border-radius: 50%;
             left: 0;
             top: -3px;
             transition: left 0.3s ease, background .3s ease, box-shadow 0.1s ease, transform .1s ease;
           }

&:before {
   background-color: transparentize(#E51253, .85);
 }

&:after {
   background-color: #afafaf;
   box-shadow: 0px 3px 1px -2px rgba(0, 0, 0, 0.2), 0px 2px 2px 0px rgba(0, 0, 0, 0.14), 0px 1px 5px 0px rgba(0, 0, 0, 0.12);
 }
}

// Switch active style
   input[type=checkbox]:checked:not(:disabled) ~ .lever:active::before,
   input[type=checkbox]:checked:not(:disabled).tabbed:focus ~ .lever::before {
     transform: scale(2.4);
     background-color: transparentize(#E51253, .85);
   }

input[type=checkbox]:not(:disabled) ~ .lever:active:before,
input[type=checkbox]:not(:disabled).tabbed:focus ~ .lever::before {
  transform: scale(2.4);
  background-color: rgba(0,0,0,.08);
}

// Disabled Styles
   .switch input[type=checkbox][disabled] + .lever {
     cursor: default;
     background-color: rgba(0,0,0,.12);
   }

.switch label input[type=checkbox][disabled] + .lever:after,
.switch label input[type=checkbox][disabled]:checked + .lever:after {
  background-color: #afafaf;
}


// Remove default Radio Buttons
   [type="radio"]:not(:checked),
   [type="radio"]:checked {
     position: absolute;
     opacity: 0;
     pointer-events: none;
   }

[type="radio"]:not(:checked) + span,
[type="radio"]:checked + span {
  position: relative;
  padding-left: 35px;
  cursor: pointer;
  display: inline-block;
  height: 25px;
  line-height: 25px;
  font-size: 1rem;
  transition: .28s ease;
  user-select: none;
}

[type="radio"] + span:before,
[type="radio"] + span:after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  margin: 4px;
  width: 16px;
  height: 16px;
  z-index: 0;
  transition: .28s ease;
}

/* Unchecked styles */
[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after,
[type="radio"]:checked + span:before,
[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border-radius: 50%;
}

[type="radio"]:not(:checked) + span:before,
[type="radio"]:not(:checked) + span:after {
  border: 2px solid #cfcfcf;
}

[type="radio"]:not(:checked) + span:after {
  transform: scale(0);
}

/* Checked styles */
[type="radio"]:checked + span:before {
  border: 2px solid transparent;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:before,
[type="radio"].with-gap:checked + span:after {
  border: #E51253;
}

[type="radio"]:checked + span:after,
[type="radio"].with-gap:checked + span:after {
  background-color: #E51253;
}

[type="radio"]:checked + span:after {
  transform: scale(1.02);
}

/* Radio With gap */
[type="radio"].with-gap:checked + span:after {
  transform: scale(.5);
}

/* Focused styles */
[type="radio"].tabbed:focus + span:before {
  box-shadow: 0 0 0 10px rgba(0,0,0,.1);
}

/* Disabled Radio With gap */
[type="radio"].with-gap:disabled:checked + span:before {
  border: 2px solid #afafaf;
}

[type="radio"].with-gap:disabled:checked + span:after {
  border: none;
  background-color: #afafaf;
}

/* Disabled style */
[type="radio"]:disabled:not(:checked) + span:before,
[type="radio"]:disabled:checked + span:before {
  background-color: transparent;
  border-color: #afafaf;
}

[type="radio"]:disabled + span {
  color: #afafaf;
}

[type="radio"]:disabled:not(:checked) + span:before {
  border-color: #afafaf;
}

[type="radio"]:disabled:checked + span:after {
  background-color: #afafaf;
  border-color: #8f8f8f;
}

$switch-bg-color: #E51253 !default;
$switch-checked-lever-bg: desaturate(lighten($switch-bg-color, 25%), 25%) !default;

.switch label input[type=checkbox] {
  opacity: 0;
  width: 0;
  height: 0;

  &:checked + .lever {
    background-color: $switch-checked-lever-bg!important;

    &:before, &:after {
      left: 18px;
    }

    &:after {
      background-color: $switch-bg-color!important;
    }
  }
}
